<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="../static/js/qrcode.js"></script>
<style>
    .box{
        height: 400px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        /*flex-wrap: wrap;*/
        /*justify-content: center;*/
        /*align-items: baseline;*/
        border: 1px solid red;
        align-content: space-evenly;
    }
    .item{
        border: 1px solid red;
        /*font-size: 32px;*/
        width: 100px;
        height: 100px;
        font-size: 3rem;
    }
    .item:nth-child(2){
        /*flex-grow: 1;*/
        /*flex-shrink: 100;*/
        flex-basis: 200px;
        align-self: center;

    }
    .item:nth-child(3){
        /*flex-grow:2;*/
    }
    .item:nth-child(4){
        align-self: flex-end;
    }
    .item2{
        border: 1px solid red;
        font-size: 32px;
        width: 100px;
        height: 80px;
    }
    .item3{
        border: 1px solid red;
        font-size: 32px;
        width: 100px;
        height: 120px;
    }
</style>
<body>
<div id="qrcode"></div>
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
<!--    <div class="item">5</div>-->
<!--    <div class="item">6</div>-->
<!--    <div class="item">7</div>-->
<!--    <div class="item">8</div>-->
<!--    <div class="item">9</div>-->
<!--    <div class="item">10</div>-->
<!--    <div class="item">11</div>-->
<!--    <div class="item">12</div>-->
<!--    <div class="item">13</div>-->
<!--    <div class="item">14</div>-->
<!--    <div  class="item">15</div>-->
</div>
<script>
new QRCode(document.getElementById("qrcode"),"傻B")
</script>
</body>
</html>